<template>
  <div class="crumbs">
    <div class="wrap crumbs-box">
      <ul class="crumbs-ul" v-if="displayType === 'crumbs'">
        <li class="crumbs-li" @click="goHome()">
          <div class="text">
            <p>首页</p>
          </div>
          <i class="el-icon-arrow-right next-icon"></i>
        </li>
        <li
          class="crumbs-li"
          v-for="(item, idx) in crumbs"
          :key="item.path"
          @click.prevent="goRoutePage(item, idx === crumbs.length - 1)">
          <div class="text">
            <p></p>
            <p>{{ item.title }}</p>
          </div>
          <i class="el-icon-arrow-right next-icon"></i>
        </li>
      </ul>
      <div v-else-if="displayType === 'return'" class="return-btn" @click="goPerPage">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'crumbsCom',
  props: {
    displayType: {
      type: String,
      default: 'crumbs', // crumbs, return
    },
    returnType: {
      type: String,
      default: 'back', // crumbs, back, crumbs：按页面层级返回，back：按路由顺序返回，关联页面需要在路由页面配置deepth
    },
  },
  data() {
    return {
      routerPages: null,
      showTop: '',
      currDeepth: 0,
      beforeDeepth: 0,
    }
  },
  created() {},
  computed: {
    crumbs() {
      const crumbs = []
      if (this.routerPages && this.routerPages.length) {
        this.routerPages.forEach((item, idx) => {
          const cItem = {
            name: item.name,
            title: item.meta.title,
            params: null,
          }
          const nextPage = this.routerPages[idx + 1]
          if (nextPage) {
            const { parent } = nextPage.meta
            if (parent.title !== undefined) {
              cItem.title = parent.title
            }
            if (parent.params) {
              cItem.params = parent.params
            }
          }
          crumbs.push(cItem)
        })
      }
      return crumbs
    },
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(val, beforeVal) {
        this.currDeepth = val.meta.deepth
        this.beforeDeepth = (beforeVal && beforeVal.meta.deepth) || 0
        this.routerPages = []
        const currPageName = val.name
        this.routerPages = this.findRouterLevels(currPageName, this.$router.getRoutes()).reverse()
      },
    },
  },
  methods: {
    findRouterLevels(matchName, routerArr) {
      let results = []
      const routeItem =
        routerArr &&
        routerArr.find(item => {
          return item.name === matchName
        })
      if (routeItem) {
        results.push(routeItem)
        if (routeItem.meta.parent && routeItem.meta.parent.name) {
          results = results.concat(this.findRouterLevels(routeItem.meta.parent.name, routerArr))
        }
      }
      return results
    },
    goRoutePage(item, isEnd) {
      if (!isEnd) {
        const routeParams = {
          name: item.name,
        }
        if (item.params) {
          routeParams.params = item.params
        }
        this.$router.push(routeParams)
      }
    },
    goHome() {
      this.$router.push({ name: 'questionary' })
    },
    goPerPage() {
      if (this.returnType === 'crumbs') {
        const crumbsLength = this.crumbs.length
        if (crumbsLength > 1) {
          const perPage = this.crumbs[crumbsLength - 2]
          this.goRoutePage(perPage)
        } else {
          this.goHome()
        }
      } else {
        if (this.currDeepth > this.beforeDeepth || this.beforeDeepth < 1) {
          this.$router.go(-1)
        } else {
          this.goHome()
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.crumbs {
  .crumbs-box {
    .crumbs-ul {
      display: flex;
      align-items: center;
      font-size: 16px;

      .crumbs-li {
        display: flex;
        align-items: center;
        cursor: pointer;
        .text {
          margin-left: 5px;
          margin-right: 5px;
          p {
            font-size: 16px;
          }
        }

        .next-icon {
          font-size: 12px;
          color: #fff;
          margin-top: 3px;
        }

        // &:not(:first-child) {
        //   margin-left: 5px;
        // }

        &:not(:last-child) {
          color: #fff;
          &:hover {
            text-shadow: 0 0 10px #fff, 0 0 2px #fff, 0 0 40px #fff;
          }
          // font-weight: bold;
        }

        &:last-child {
          color: #dedede;
          cursor: initial;

          .next-icon {
            display: none;
          }
        }
      }
    }
    .return-btn {
      font-size: 16px;
      background: rgba($color: #fff, $alpha: 0.2);
      color: #8c8c8c;
      padding: 1px 10px 2px 6px;
      border-radius: 16px;
      cursor: pointer;
      i {
        margin-right: 2px;
      }
      &:hover {
        background: rgba($color: #fff, $alpha: 0.25);
      }
    }
  }
}
</style>
